.wrapper{
    width: 100%;
    height: 100%;
    background-color: #f8f9fd;
}
/*头部*/
.wrapper header{
    display: flex;
    position: fixed;
    top: 0;
    padding-top: 0;
}
.wrapper header .header{
    background-color: #f8f9fd;
    height: 20vw;
    display: flex;
}
/*导航图标*/
.wrapper header .san{
    width: 15vw;

    margin-left:0;
}
.wrapper header .san img{
    width: 5vw;
    height: 5vw;

    margin-left: 5vw;
    margin-top: 7vw;
}
/*搜索框*/
.wrapper header .search{
    display: flex;

    width: 70vw;
    height: 10vw;
    background-color: #e9ecf1;
    
    margin-top: 5vw;
    margin-left: 0;
    border-radius: 5vw;
}
.wrapper header .search{
    display: flex;
}
.wrapper header .search div{
    font-size: 5vw;
    color: #a9acb4;
    
    margin-top: 1vw;
    margin-left: 0vw;
    
}
.wrapper header .search img{
    width: 5vw;
    height: 5vw;

    margin-left: 5vw;
    margin-top: 2.5vw;
}
/*听歌识曲*/
.wrapper header .yuyin{
    width: 15vw;
    margin-left: 0;
}
.wrapper header .yuyin img{
    width: 6vw;
    height: 6vw;

    margin-left: 5vw;
    margin-top: 7vw;
}
/*底部*/
.wrapper footer{ 
    width: 100%;
    height: 10vw;
    position: fixed;
    border-top: solid 1px #DDD;
    background-color: #fff;

    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.wrapper footer ul{
    width: 100vw;
    list-style: none;
    justify-content: space-around;
    padding: 0;
    display: flex;
}

.wrapper footer ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.wrapper footer ul li img{
    width: 8vw;
    height: 8vw;
}
/* 内容*/ 
.wrapper middle {
    display: flex;
    flex-direction: column;
    padding-top: 20vw;
    padding-bottom: 10vw;
}
.wrapper middle .playlist .title{
    margin-left: 6vw;

    font-size: 6vw;
    color: #313b4b;
}
.wrapper middle .playlist .tupian{
    margin: auto 5vw;
    display: flex;
}
.wrapper middle .playlist .tupian img{ 
    margin: auto;
    width: 28vw;
}
.wrapper middle .love {
    margin-top: 10vw;

    display: flex;
    flex-direction: column;
}
.wrapper middle .love .recomand{
    font-size: 6vw;
    color: #313b4b;
    margin-left: 5vw;
}
.wrapper middle .love .musics{
    display: flex;
    flex-direction: column;

    margin-top: 2.5vw;
}
.wrapper middle .love .musics .music{
    display: flex;

    height: 13vw;
    width: 100vw;
    
    margin-top: 2vw;
}
.wrapper middle .love .musics .music .fengmian img{
    width: 13vw;
    height: 13vw;
    margin-left: 5vw;


    border-radius: 2vw;
}
.wrapper middle .love .musics .music .info{
    display: flex;
    flex-direction: column;

    margin-left: 2vw;
}
.wrapper middle .love .musics .music .info .song_name{
    font-size: 4vw;
    color: #313b4b;
}
.wrapper middle .love .musics .music .info .singer{
    font-size: 3vw;
    color: #d9dade;
}
.wrapper middle .love .musics .music .play{

    margin-left: auto;
}
.wrapper middle .love .musics .music .play img{
    width: 6vw;

    margin-top: 3vw;
    margin-right: 12vw;
}